<template>
    <div class="nav_list">
        <ul class="nav_list_left">
            <li v-for="(val,key) in ListTitle.data">
                <a href="#">{{val.title}}</a>
                <div class="nav_list_extend">
                    <ul>
                        <li v-for="(item,key) in val.Plist.slice(0,6)">
                            <a href="#"><img :src="item.imgsrc" alt="">
                                <span>{{item.name}}</span> 
                            </a>
                        </li>
                    </ul>
                    <ul v-if="val.Plist.length>6">
                        <li v-for="(item,key) in val.Plist.slice(6,12)">
                            <a href="#"><img :src="item.imgsrc" alt="">
                                <span>{{item.name}}</span> 
                            </a>
                        </li>
                    </ul>
                    <ul v-if="val.Plist.length>13">
                        <li v-for="(item,key) in val.Plist.slice(12,18)">
                            <a href="#"><img :src="item.imgsrc" alt="">
                                <span>{{item.name}}</span> 
                            </a>
                        </li>
                    </ul>
                    <ul v-if="val.Plist.length>20">
                        <li v-for="(item,key) in val.Plist.slice(18,24)">
                            <a href="#"><img :src="item.imgsrc" alt="">
                                <span>{{item.name}}</span> 
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  data() {
    return {
      ListTitle: {}
    }
  },
  methods:{
    sendMsg: function() {
      this.axios.post("/jun", "type=top&key=123456",).then(res => {
      //console.log(res.data);
      this.ListTitle = res.data;
      console.log(this.ListTitle.data);
      })
    }
  },
  mounted(){
    this.sendMsg()
  }
};
</script>
<style scoped>
.nav_list {
  width: 230px;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  z-index: 2;
}
.nav_list > .nav_list_left {
  height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nav_list > .nav_list_left > li {
  width: 230px;
  height: 42px;
}
.nav_list > .nav_list_left > li > a {
  display: block;
  color: #fff;
  font-size: 14px;
  padding-left: 30px;
  line-height: 42px;
}
.nav_list > .nav_list_left > li > a:hover {
  background-color: #ff6700;
}
.nav_list > .nav_list_left > li:hover .nav_list_extend ul {
  display: block;
}
.nav_list_extend {
  position: absolute;
  z-index: 2;
  display: flex;
  top: 0px;
  left: 230px;
  background-color: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}
.nav_list_extend ul {
  display: none;
  height: 460px;
}
.nav_list_extend li {
  width: 242.5px;
  height: 76px;
  background: #fff;
}
.nav_list_extend a {
  display: block;
  line-height: 40px;
  padding: 18px 20px;
  position: relative;
}
.nav_list_extend a > img {
  width: 40px;
  height: 40px;
}
.nav_list_extend a span {
  margin-left: 10px;
  font-size: 14px;
  color: #333;
  transition: all 0.2s;
}
.nav_list_extend li:hover span {
  color: #ff6700;
}
</style>
